<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投资组合管理</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-size: 0.875rem; /* 14px */
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
            font-size: 0.875rem; /* 14px */
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: box-shadow 0.3s ease-in-out;
            font-size: 0.875rem; /* 14px */
        }
        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .card-header {
            background-color: #fff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
            font-weight: 600;
            border-top-left-radius: 10px !important;
            border-top-right-radius: 10px !important;
        }
        .table {
            font-size: 0.8125rem; /* 13px */
        }
        .table th {
            border-top: none;
            font-weight: 600;
        }
        .btn {
            font-size: 0.8125rem; /* 13px */
        }
        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .btn-primary:hover {
            background-color: #0b5ed7;
            border-color: #0a58ca;
        }
        .btn-success {
            background-color: #198754;
            border-color: #198754;
        }
        .btn-success:hover {
            background-color: #157347;
            border-color: #146c43;
        }
        .pagination .page-link {
            color: #0d6efd;
            font-size: 0.8125rem; /* 13px */
        }
        .pagination .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .modal-content {
            border-radius: 10px;
            border: none;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            font-size: 0.875rem; /* 14px */
        }
        .modal-header {
            background-color: #f8f9fa;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        h2 {
            color: #2c3e50;
            font-weight: 600;
            font-size: 1.25rem; /* 20px */
        }
        .form-control, .form-select {
            border-radius: 8px;
            font-size: 0.875rem; /* 14px */
        }
        .form-label {
            font-size: 0.8125rem; /* 13px */
        }
        .portfolio-summary {
            background: linear-gradient(135deg, #0d6efd, #0b5ed7);
            color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            font-size: 0.875rem; /* 14px */
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="bi bi-bank"></i> 个人投资管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">

                    <li class="nav-item">
                        <a class="nav-link" href="fund.html">标的管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="portfolio.html">投资组合</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="transaction.html">交易记录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="investmentGoal.html">投资目标</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="investmentDiary.html">投资日记</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="riskAssessment.html">风险评估</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="taxCalculation.html">税务计算</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        
        <!-- 查询条件 -->
        <div class="card mb-3">
            <div class="card-header">查询条件</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <input type="text" class="form-control" id="searchPortfolioName" placeholder="请输入组合名称">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 d-flex justify-content-center">
                        <button class="btn btn-primary me-2" id="fetchPortfoliosButton">
                            <i class="bi bi-search"></i> 查询
                        </button>
                        <button class="btn btn-primary" id="addPortfolioButton" data-bs-toggle="modal" data-bs-target="#addPortfolioModal">
                            <i class="bi bi-plus-circle"></i> 新增组合
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 表格 -->
        <div class="card mb-3">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="portfolioTable" class="table table-striped table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>组合名称</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>总价值</th>
                                <th>总成本</th>
                                <th>总收益</th>
                                <th>收益率</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="portfolioTableBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div id="pagination" class="d-flex justify-content-between">
            <div>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item">
                            <select class="form-select" id="itemsPerPage">
                                <option value="10" selected>10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </li>
                        <li class="page-item" id="prevPage">
                            <a class="page-link" tabindex="-1" aria-disabled="true" id="pPage">上一页</a>
                        </li>
                        <li class="page-item">
                            <span class="page-link">
                                第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">1</span> 页
                            </span>
                        </li>
                        <li class="page-item" id="nextPage">
                            <a class="page-link" id="nPage">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 新增组合模态框 -->
    <div class="modal fade" id="addPortfolioModal" tabindex="-1" aria-labelledby="addPortfolioModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addPortfolioModalLabel">新增投资组合</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addPortfolioForm">
                        <div class="mb-3">
                            <label for="addPortfolioName" class="form-label">组合名称</label>
                            <input type="text" class="form-control" id="addPortfolioName" required>
                        </div>
                        <div class="mb-3">
                            <label for="addPortfolioDescription" class="form-label">描述</label>
                            <textarea class="form-control" id="addPortfolioDescription" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> 取消
                    </button>
                    <button type="button" class="btn btn-primary" id="saveAddPortfolio">
                        <i class="bi bi-save"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑组合模态框 -->
    <div class="modal fade" id="editPortfolioModal" tabindex="-1" aria-labelledby="editPortfolioModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editPortfolioModalLabel">编辑投资组合</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editPortfolioForm">
                        <input type="hidden" id="editPortfolioId">
                        <div class="mb-3">
                            <label for="editPortfolioName" class="form-label">组合名称</label>
                            <input type="text" class="form-control" id="editPortfolioName" required>
                        </div>
                        <div class="mb-3">
                            <label for="editPortfolioDescription" class="form-label">描述</label>
                            <textarea class="form-control" id="editPortfolioDescription" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> 取消
                    </button>
                    <button type="button" class="btn btn-primary" id="saveEditPortfolio">
                        <i class="bi bi-save"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 组合详情模态框 -->
    <div class="modal fade" id="detailPortfolioModal" tabindex="-1" aria-labelledby="detailPortfolioModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailPortfolioModalLabel">组合详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="portfolio-summary">
                                <div class="row">
                                    <div class="col-md-3">
                                        <h6>组合名称</h6>
                                        <p id="detailPortfolioName"></p>
                                    </div>
                                    <div class="col-md-3">
                                        <h6>总价值</h6>
                                        <p id="detailPortfolioTotalValue"></p>
                                    </div>
                                    <div class="col-md-3">
                                        <h6>总收益</h6>
                                        <p id="detailPortfolioTotalProfit"></p>
                                    </div>
                                    <div class="col-md-3">
                                        <h6>收益率</h6>
                                        <p id="detailPortfolioTotalProfitRate"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6>基本信息</h6>
                            <p><strong>描述:</strong> <span id="detailPortfolioDescription"></span></p>
                            <p><strong>创建时间:</strong> <span id="detailPortfolioCreatedTime"></span></p>
                            <p><strong>更新时间:</strong> <span id="detailPortfolioUpdatedTime"></span></p>
                        </div>
                        <div class="col-md-6">
                            <h6>组合概览</h6>
                            <p><strong>总价值:</strong> <span id="detailPortfolioTotalValue"></span></p>
                            <p><strong>总成本:</strong> <span id="detailPortfolioTotalCost"></span></p>
                            <p><strong>总收益:</strong> <span id="detailPortfolioTotalProfit"></span></p>
                            <p><strong>收益率:</strong> <span id="detailPortfolioTotalProfitRate"></span></p>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <h6>组合构成</h6>
                            <button class="btn btn-primary mb-3" id="addFundToPortfolioButton" data-bs-toggle="modal" data-bs-target="#addFundModal" data-portfolio-id="">
                                <i class="bi bi-plus-circle"></i> 添加标的
                            </button>
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>标的代码</th>
                                        <th>标的名称</th>
                                        <th>持有份额</th>
                                        <th>买入价格</th>
                                        <th>当前净值</th>
                                        <th>当前价值</th>
                                        <th>成本</th>
                                        <th>收益</th>
                                        <th>收益率</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="portfolioFundsTableBody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <canvas id="portfolioChart" width="400" height="200"></canvas>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> 关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加标的到组合模态框 -->
    <div class="modal fade" id="addFundModal" tabindex="-1" aria-labelledby="addFundModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addFundModalLabel">添加标的到组合</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addFundForm">
                        <input type="hidden" id="addFundPortfolioId">
                        <div class="mb-3">
                            <label for="addFundCode" class="form-label">标的代码</label>
                            <input type="text" class="form-control" id="addFundCode" required>
                        </div>
                        <div class="mb-3">
                            <label for="addFundName" class="form-label">标的名称</label>
                            <input type="text" class="form-control" id="addFundName" readonly>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveAddFund">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 自定义模态框 -->
    <div class="modal fade" id="customAlertModal" tabindex="-1" aria-labelledby="customAlertModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customAlertModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="customAlertMessage">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="portfolio.js?v=1.0.0"></script>
</body>
</html>